// -------------1. 查询展示数据---------------
function renderStudent() {
    axios.get('/student/list').then(result => {
        console.log(result);
        let { code, data } = result.data;
        // console.log(code);
        // console.log(data);
        if (code === 0) {
            let trs = ``;
            data.forEach(item => {
                trs += `<tr>
                <th scope="row">${item.id}</th>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td>${item.group}</td>
                <td>${item.phone}</td>
                <td>${item.salary}</td>
                <td>${item.truesalary}</td>
                <td>${item.province}${item.city}${item.county}</td>
                <td>
                  <button type="button" class="btn btn-primary btn-sm">修改</button>
                  <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
                </td>
              </tr>`
            });
            //循环结束，trs就是拼接好的56个tr，把所有tr放到tbody中   看出来了吗  不是在html里加上类么 bu 晓得发 id必填啥东东 看文档需要穿的参数
            $('tbody').html(trs);
        }
    })
}
renderStudent();
// -------------2. 添加数据---------------
//2.1介绍弹出层
//2.2省市县联动效果
//获取省放到下拉框的位置
axios.get('/geo/province').then(result => {
    // console.log(result.data);
    let option = `<option value="" selected>--省--</option>`;
    result.data.forEach(item => {
        option += `<option value="${item}">${item}</option>`;

    });
    //循环结束，得到了所有的省，把所有的省放到select下拉框中
    $('select[name=province]').html(option)
});
//获取市放到下拉框的位置
$('select[name=province]').on('change', function() {
    let pname = $(this).val(); //获取下拉框的值，找下拉框，使用value属性获取option的value值
    if (pname === '') {
        $('select[name=city]').html(`<option value="" selected>--市--</option>`)
        $('select[name=county]').html(`<option value="" selected>--县--</option>`)
        return;
    }
    axios.get('/geo/city', { params: { pname } }).then(result => {
        // console.log(result.data);
        let option = `<option value="" selected>--市--</option>`;
        result.data.forEach(item => {
                option += `<option value="${item}">${item}</option>`;

            })
            //循环结束，得到了所有的省，把所有的省放到select下拉框中
        $('select[name=city]').html(option)
    })
})

//获取县
$('select[name=city]').on('change', function() {
    let pname = $(this).parents('.row').find('select').eq(0).val(); //获取下拉框的值，找下拉框，使用value属性获取option的value值
    let cname = $(this).val(); //当前选择的市
    //如果省是空的，清空市 清空县 同时return
    if (cname === '') {
        $('select[name=county]').html(`<option value="" selected>--县--</option>`)
        return;
    }
    axios.get('/geo/county', { params: { pname, cname } }).then(result => {
        console.log(result);
        let option = `<option value="" selected>--县--</option>`;
        result.data.forEach(item => {
            option += `<option value="${item}>${item}</option>`;

        });
        //循环结束，得到了所有的省，把所有的省放到select下拉框中
        $('select[name=county]').html(option);
    })
})

//3.3表单验证
//3.4表单提交，添加数据
// -------------3. 修改数据---------------
// -------------4. 删除数据---------------
//事件委托的方式，给删除添加单击事件
$('tbody').on('click', '.del', function() {
    //询问是否要删除
    if (!confirm('确定要删除么?')) return;
    // 取得id
    let id = $(this).data('id'); //data()方法是jq封装方法，作用是获取元素的data-xxx属性值
    // console.log(id);
    // 获取到了 但是老师演示的时候控制台显示删除成功 我就没有显示对 你这错着 着上一部id获取到了肯定是下边这个发请求没带着id

    // 一步步看 接口对   params  细心点  好滴 谢谢哥哥拜拜白
    axios.delete('/student/delete', { params: { id } }).then(result => {
        // console.log(result);
        let { code, message } = result.data;
        if (code === 0) {
            toastr.success(message); //提示
            renderStudent(); //重新调用函数，重新获取全部学员
        }
    })
})